<template>
  <div class="medical-home">
    <!-- 蓝色头部区域 -->
    <div class="header-section">
      <div class="profile-section">
        <div class="profile-picture" @click="editProfile">
          <img :src="userInfo.avatar || '/user-avatar.png'" alt="用户头像" />
        </div>
        <div class="user-info">
          <h1 class="user-name">{{ userInfo.nickname }}</h1>
          <p class="user-email">{{ userInfo.email }}</p>
        </div>
        <div class="edit-icon" @click="editProfile">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
            <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
          </svg>
        </div>
      </div>
    </div>

    <!-- 白色内容区域 -->
    <div class="content-section">
      <!-- 主要类别 -->
      <div class="main-categories">
        <h2 class="section-title">主要类别</h2>
        <div class="category-grid">
          <div class="category-card blue" @click="handleCategoryClick('prescription')">
            <div class="category-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path d="M9 12l2 2 4-4"/>
                <path d="M21 12c-1 0-2-1-2-2s1-2 2-2 2 1 2 2-1 2-2 2z"/>
                <path d="M3 12c1 0 2-1 2-2s-1-2-2-2-2 1-2 2 1 2 2 2z"/>
              </svg>
            </div>
            <span class="category-text">处方药</span>
            <div class="arrow">→</div>
          </div>

          <div class="category-card orange" @click="handleCategoryClick('records')">
            <div class="category-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="9" y1="9" x2="15" y2="9"/>
                <line x1="9" y1="12" x2="15" y2="12"/>
                <line x1="9" y1="15" x2="15" y2="15"/>
              </svg>
            </div>
            <span class="category-text">医疗记录</span>
            <div class="arrow">→</div>
          </div>

          <div class="category-card red" @click="handleCategoryClick('reports')">
            <div class="category-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <path d="M12 6v6l4 2"/>
              </svg>
            </div>
            <span class="category-text">体检报告</span>
            <div class="arrow">→</div>
          </div>

          <div class="category-card cyan" @click="handleCategoryClick('health')">
            <div class="category-icon">
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
              </svg>
            </div>
            <span class="category-text">健康数据</span>
            <div class="arrow">→</div>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="function-list">

        <div class="function-item" @click="handleFunctionClick('patients')">
          <div class="function-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
          </div>
          <span class="function-text">就诊人</span>
          <div class="arrow">→</div>
        </div>

        <div class="function-item" @click="handleFunctionClick('payment')">
          <div class="function-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2">
              <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/>
              <line x1="1" y1="10" x2="23" y2="10"/>
            </svg>
          </div>
          <span class="function-text">付款方式</span>
          <div class="arrow">→</div>
        </div>

        <div class="function-item" @click="handleFunctionClick('referral')">
          <div class="function-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
              <circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
          </div>
          <span class="function-text">推荐朋友和家人</span>
          <div class="arrow">→</div>
        </div>

        <div class="function-item" @click="handleFunctionClick('contact')">
          <div class="function-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2">
              <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
            </svg>
          </div>
          <span class="function-text">联系我们</span>
          <div class="arrow">→</div>
        </div>

        <div class="function-item" @click="handleFunctionClick('settings')">
          <div class="function-icon">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1877F2" stroke-width="2">
              <circle cx="12" cy="12" r="3"/>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1 1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
            </svg>
          </div>
          <span class="function-text">设置</span>
          <div class="arrow">→</div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="tabbar-new">
      <div
        v-for="(tab, idx) in tabbar"
        :key="tab.icon"
        :class="['tabbar-item', { active: tab.icon === activeTab }]"
        @click="handleTabClick(tab.icon)"
      >
        <span class="icon-wrap">
          <svg v-if="tab.icon === 'home'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'home' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 11.5L12 4l9 7.5V20a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1v-4h-2v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V11.5z"/>
          </svg>
          <svg v-else-if="tab.icon === 'msg'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'msg' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
          </svg>
          <svg v-else-if="tab.icon === 'calendar'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'calendar' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
            <line x1="16" y1="2" x2="16" y2="6"/>
            <line x1="8" y1="2" x2="8" y2="6"/>
            <line x1="3" y1="10" x2="21" y2="10"/>
          </svg>
          <svg v-else-if="tab.icon === 'bell'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'bell' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
          </svg>
          <svg v-else-if="tab.icon === 'user'" width="28" height="28" viewBox="0 0 24 24" fill="none" :stroke="tab.icon === 'user' ? '#1877F2' : '#555'" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
            <circle cx="12" cy="7" r="4"/>
          </svg>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserData } from '../../composables/useUserData'

const router = useRouter()
const { userInfo } = useUserData()
const activeTab = ref('profile')

// 底部导航栏数据
const tabbar = [
  { icon: 'home', route: '/home' },
  { icon: 'msg', route: '/zxl' },
  { icon: 'calendar', route: '/time-select' },
  { icon: 'bell', route: '/lhx-patient-chat' },
  { icon: 'user', route: '/medical-home' }
]

const handleTabClick = (icon: string) => {
  const tab = tabbar.find(t => t.icon === icon)
  if (tab) {
    router.push(tab.route)
  }
}

const setActiveTab = (tab: string) => {
  activeTab.value = tab
}

const handleCategoryClick = (category: string) => {
  console.log('点击类别:', category)
  if (category === 'prescription') {
    router.push('/prescription-drug')
  } else if (category === 'records') {
    router.push('/medical-records')
  } else if (category === 'reports') {
    router.push('/physical-examination-reports')
  } else if (category === 'health') {
    router.push('/health-data')
  }
  // 这里可以添加其他类别的跳转逻辑
}

const handleFunctionClick = (functionName: string) => {
  console.log('点击功能:', functionName)
  // 这里可以添加具体的跳转逻辑
}

const editProfile = () => {
  router.push('/user-profile-edit')
}
</script>

<style scoped lang="scss">
.medical-home {
  min-height: 100vh;
  background: #f5f5f5;
  position: relative;
}

.header-section {
  background: linear-gradient(135deg, #1877F2 0%, #005AFF 100%);
  padding: 20px;
  color: white;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.3;
  }
}

.profile-section {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.profile-picture {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: scale(1.05);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.user-info {
  flex: 1;

  .user-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 5px 0;
  }

  .user-email {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
  }
}

.edit-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 0.3);
  }
}

.content-section {
  background: white;
  border-radius: 20px 20px 0 0;
  margin-top: -20px;
  padding: 30px 20px 100px 20px;
  position: relative;
  z-index: 2;
}

.section-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0;
  color: #333;
}

.category-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}

.category-card {
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;

  &.blue { 
    background: #1877F2; 
    .category-text { color: white; }
    .arrow { color: white; }
  }
  &.orange { 
    background: #FF9500; 
    .category-text { color: white; }
    .arrow { color: white; }
  }
  &.red { 
    background: #FF3B30; 
    .category-text { color: white; }
    .arrow { color: white; }
  }
  &.cyan { 
    background: #00C7BE; 
    .category-text { color: white; }
    .arrow { color: white; }
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  }

  .category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    color: white;
  }

  .category-card.blue .category-icon { background: rgba(255, 255, 255, 0.2); }
  .category-card.orange .category-icon { background: rgba(255, 255, 255, 0.2); }
  .category-card.red .category-icon { background: rgba(255, 255, 255, 0.2); }
  .category-card.cyan .category-icon { background: rgba(255, 255, 255, 0.2); }

  .category-text {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
  }

  .arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
  }
}

.function-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
}

.function-item {
  background: white;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background: #f8f9fa;
  }

  .function-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1877F2;
    transition: all 0.3s ease;
  }

  &:hover .function-icon {
    background: #e9ecef;
    color: #1877F2;
  }

  .function-text {
    flex: 1;
    font-size: 16px;
    color: #333;
    font-weight: 500;
  }

  .arrow {
    color: #999;
    font-size: 16px;
  }
}

/* 底部导航栏样式 */
.tabbar-new {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0 auto;
  width: 92vw;
  max-width: 420px;
  height: 56px;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 2px 16px 0 rgba(24,119,242,0.08);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 100;
}

.tabbar-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    .icon-wrap svg {
      stroke: #1877F2;
    }
  }

  .icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 768px) {
  .content-section {
    padding: 20px 15px 100px 15px;
  }

  .category-grid {
    gap: 12px;
  }

  .category-card {
    padding: 16px;
  }

  .function-item {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .profile-picture {
    width: 60px;
    height: 60px;
    margin-right: 15px;
  }

  .user-name {
    font-size: 20px;
  }

  .user-email {
    font-size: 14px;
  }

  .category-grid {
    grid-template-columns: 1fr;
  }
}
</style> 
